<template>
  <div class="point-image" :style="styleColor">
    <svg>
      <image x="0" y="0" width="100%" height="100%" v-bind:xlink:href="imgUrl" preserveAspectRatio="none"></image>
    </svg>
  </div>
</template>

<script>
  import { getDataByPointId } from '@/api/pointData'

  const img = 'https://gw.alicdn.com/imgextra/i2/O1CN01sZjPkM22T0jC4FMIh_!!6000000007120-2-tps-280-280.png'

  export default {
    name: "PointImage",
    components: {},
    props: {
      value: Object,
      ispreview: Boolean,
    },
    data() {
      return {
        options: {},
        imgUrl: img,
      };
    },
    computed: {
      transStyle() {
        return this.objToOne(this.options);
      },
      styleColor() {
        return {
          position: this.ispreview ? "absolute" : "static",
          display: this.transStyle.hideLayer == undefined ?
            "block" :
            this.transStyle.hideLayer ?
            "none" :
            "block",
          width: this.transStyle.width + "px",
          height: this.transStyle.height + "px",
          left: this.transStyle.left + "px",
          top: this.transStyle.top + "px",
          right: this.transStyle.right + "px",
        };
      },
    },
    watch: {
      value: {
        handler(val) {
          this.options = val;
          this.queryData()
        },
        deep: true,
      },
    },
    mounted() {
      this.options = this.value;
      this.parseData()
    },
    methods: {
      /*解析数据*/
      parseData() {
        // console.log(this.options)
        this.queryData()
        if(this.options.data.dataType === "dynamicData" && this.ispreview) {
          setInterval(this.queryData, this.options.data.refreshTime)
        }
      },
      /*查询参数点的数据*/
      queryData() {
        if(this.options.data.stationPoint == null) {
          return; // 还未配置参数点
        }
        if(this.options.data.pointRule.length < 1) {
          return; // 还未配置规则
        }
        // 根据规则和参数值，显示图片
        getDataByPointId(this.options.data.stationPoint.pointId).then(resp => {
          let pointCode = Object.keys(resp.data)[0]
          let pointValue = Number(resp.data[pointCode])
          try{
            this.imgUrl = this.options.data.pointRule.find(v => v.pointValue == pointValue).imgUrl
          }catch(e){
            console.error(`发生错误，没有找到参数编码[${pointCode}]值为[${pointValue}]的图片显示配置`)
            this.imgUrl = img
          }
        })
      },
    },
  };
</script>

<style scoped lang="scss">
  .point-image {
    width: 100%;
    height: 100%;
    svg {
      width: 100%;
      height: 100%;

    }
  }
</style>
